<template>
  <div>
    <el-upload
      action="http://localhost:8081/upload/image"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="compressUpload"
      :accept="accept"
      multiple
      ref="upload"
      :file-list="fileList"
      >
      
      <!-- :file-list="fileList" -->
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" class="centered">
      <img width="80%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { compressImage, uploadImage } from '@/utils/common'
export default {
  props: ['fileList'],
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      accept: '.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP',
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit('removeImage', file.uid)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    compressUpload(params) {
      compressImage(params.file).then((compressFile) => {
        uploadImage(compressFile).then((res) => {
          this.$emit('sendImage', params.file.uid,res.data)
        })
      })
    },

    // 清空图片列表
    clearImageList(){
      this.$refs.upload.clearFiles();
    }
  },
}
</script>

<style lang="less" scoped>
.centered {
  position: fixed;
  /* 或者使用 position: absolute; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
